<template>
  <div class="tabbar">
    <van-tabbar route v-model="state.active" active-color="#FF8198">
      <van-tabbar-item to="/index" icon="shop-o">首页</van-tabbar-item>
      <van-tabbar-item to="/order" icon="apps-o">分类</van-tabbar-item>
      <van-tabbar-item to="/category" icon="shopping-cart-o" :badge="store.getters.total"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item to="/profile" icon="friends-o">{{
        state.my
      }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
const store = useStore();
const state = reactive({
  active: 0,
  my: "未登录",
});
if(!localStorage.getItem('token') == null){
  state.my = '我的'
}else{
  state.my = '未登录'
}
</script>

<style lang="scss" scoped>
.tabbar {
  z-index: 100;
}
</style>